<!DOCTYPE html>
<html>
	<head>
		<title>Settings for the Simply Weather extension</title>
		<script src="/js/jquery/jquery-1.11.0.min.js"></script>
		<script src="/js/jquery/jquery-migrate-1.2.1.min.js"></script>
        <script src="/js/html2canvas.js"></script>

		<link rel="stylesheet" href="/bootstrap/3.3.2/css/bootstrap.min.css">
		<script src="/bootstrap/3.3.2/js/bootstrap.min.js"></script>

		<link href="/css/options.css" media="screen" rel="stylesheet" type="text/css" />
		<link href="/css/weather-icons.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<script type="text/javascript" src="js/dateformat.js"></script>
		<script type="text/javascript" src="js/core.js"></script>
			
		<div class="header">
			<div class="logo">
                <i class="wi wi-day-cloudy" title="Simply Weather for Chrome"></i>
			</div>
			<span class="power">powered by</span>
			<span class="poweredby"></span>
		</div>

		<h1>Settings for Simply Weather extension</h1>
		
		<div class="box">
			<table cellpadding="5" cellspacing="2" align="left" width="550">
				<tr>
					<th valign="top" width="200">Current locations:</th>
					<td>
                        <div id="weather_locations"></div>
                        <a id="addLocationLink" href="#new" data-toggle="popover" data-content="Click here to search and add a new location.">
                            <span class="glyphicon glyphicon glyphicon-search"></span> add new location
                        </a>
                        <a id="addGeoLocationLink" href="#new" data-toggle="popover" data-content="Click here to automatically add your current location using geo-location.">
                            <span class="glyphicon glyphicon-map-marker"></span> add your location
                        </a>
					</td>
				</tr>
				<tr>
					<th>Show values in</th>
					<td>
						<input type="radio" value="C" id="showInC" name="showIn" /> &deg;C
						&nbsp;&nbsp;&nbsp;
						<input type="radio" value="F" id="showInF" name="showIn" /> &deg;F
					</td>
				</tr>
				<tr>
					<th>Background update timeout</th>
					<td>
						<select name="updateTimeout" id="updateTimeout">
							<option value="1">1 minute</option>
							<option value="5">5 minutes</option>
							<option value="10">10 minutes</option>
							<option value="15">15 minutes</option>
							<option value="30">30 minutes</option>
							<option value="60">1 hour</option>
						</select>
					</td>
				</tr>
				<tr>
					<th>Show labels</th>
					<td>
						<input type="checkbox" value="C" id="showLabels" name="showLabels" />
						<small>(show "Weather in", "Now", "High/Low")</small>
					</td>
				</tr>
				<tr>
					<th>Show external links</th>
					<td>
						<input type="checkbox" value="C" id="showExternal" name="showExternal" />
						<small>(links to Weather.com and Weatherunderground.com)</small>
					</td>
				</tr>
				<tr>
					<th>Show weather date</th>
					<td>
						<input type="checkbox" value="C" id="showDate" name="showDate" />
					</td>
				</tr>
				<tr>
					<th>Show last read date</th>
					<td>
						<input type="checkbox" value="C" id="showReadDate" name="showReadDate" />
					</td>
				</tr>
			</table>
			<br class="clear" />
		</div>

        <div class="modal fade" id="add_location">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Add new location:</h4>
                    </div>
                    <div class="modal-body">
						<a name="new"></a>
						<div class="form-group">
							<label for="newLocation">Type in a new location to add: </label>
							<input type="text" style="width:200px; padding: 4px" id="newLocation" name="newLocation" value="" />
							<input type="button" class="btn btn-primary" id="btnAdd" value="Search" /> <br />
						</div>
						
                        <div id="message"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

		<div class="modal fade" id="geo_location">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Add your location:</h4>
                    </div>
                    <div class="modal-body">
						<a name="geo"></a>
						<div id="geo_message">Please wait ...</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <div class="box" id="preview">
            <b>Icons preview: <span></span></b>
            <div id="preview_icons"></div>
        </div>

        <div class="footer">
            <br class="clear" />
            <br />
            <h1>Support this extension:</h1>
            <b>Please <a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ZFBNDULJRKPXC"><img border="0" src="https://www.paypal.com/en_GB/i/btn/btn_donate_SM.gif" align="absmiddle" alt="PayPal - The safer, easier way to pay online." /></a> if you like my work!</b>
        </div>

		<script type="text/javascript" src="js/options.js"></script>
	</body>
</html>